<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>用户登录</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="__CSS__/base.css">
	<link rel="stylesheet" href="__CSS__/iconfont.css">
	<link rel="stylesheet" href="__CSS__/reg.css">
	<style>
		.headtil{
			color: #fff;
			font-size: 20px;
			line-height: 55px;
			position: absolute;
			z-index: 111;
			width: 100%;
		}
		.ulogo{
			background-color: #41c981;
			padding: 25px;
			border-bottom-right-radius: 25px;
			-moz-border-radius-bottomleft: 50px;
		}
	</style>
</head>
<body>
<div class="headtil">
	<span class="ulogo">虚拟现实技术实现平台</span>
</div>
<div class="wrap">
	<div class="wpn">
		<div class="form-data find_password">
			<h4>用户注册</h4>
			<p class="right_now">已有账号，<a href="{:url('index/index')}">马上登录</a></p>
			<div style="width: 100%;height: 300px; overflow:auto">
				<p class="p-input pos">
					<label>账号 （必填，由数字或字母组成最长20位）</label>
					<input type="text" id="userLoginName" name="userLoginName" maxlength="20"  onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')">

				</p>
				<p class="p-input pos">
					<label>密码 （必填）</label>
					<input type="password" name="userPassword" id="userPassword">
				</p>
				<p class="p-input pos">
					<label>确认密码 （必填）</label>
					<input type="password" name="reuserPassword" id="reuserPassword">
				</p>
				<p class="p-input pos">
					<label>用户名 （必填，最长10位）</label>
					<input type="text" name="name" maxlength="10" id="name">
				</p>
				<p class="p-input pos">
					<label>地址</label>
					<input type="text" maxlength="100" name="address" id="address" >
				</p>
				<p class="p-input pos">
					<label>公司名称</label>
					<input type="text" maxlength="50" name="company" id="company">
				</p>
				<p class="p-input pos">
					<label>国家</label>
					<input type="text" maxlength="13" name="country" id="country">
				</p>
				<p class="p-input pos">
					<label>描述</label>
					<input type="text" maxlength="255" name="description" id="description">
				</p>
				<p class="p-input pos">
					<label>名</label>
					<input type="text" maxlength="6" name="firstName" id="firstName">
				</p>
				<p class="p-input pos">
					<label>姓</label>
					<input type="text" maxlength="4" name="lastName" id="lastName">
				</p>
				<p class="p-input pos">
					<label>性别</label>
					<select id="male" style="border: none; width: 50px;height: 20px; margin: 12px 0 0 50px;">
						<option value="true">男</option>
						<option selected value="false">女</option>
					</select>
				</p>
				<p class="p-input pos">
					<label>职业</label>
					<input type="text" maxlength="25" name="job" id="job">
				</p>
				<p class="p-input pos">
					<label>手机号</label>
					<input type="text" maxlength="11" name="mobile" id="mobile" onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu = "value=value.replace(/[^0-9]/g,'')">
				</p>
				<p class="p-input pos">
					<label>电话号码</label>
					<input type="text" maxlength="12" name="phone" id="phone">
				</p>
				<p class="p-input pos">
					<label>昵称</label>
					<input type="text" maxlength="20" name="nickName" id="nickName">
				</p>
				<p class="p-input pos">
					<label>地区/城市</label>
					<input type="text" maxlength="50" name="state" id="state">
				</p>
				<p class="p-input pos">
					<label>邮编</label>
					<input type="text" name="zipcode" maxlength="6" id="zipcode">
				</p>
			</div>

			<button class="lang-btn next" id="register" style="background-color: #dddddb" disabled="disabled">注册</button>
			<p class="right">Powered by © 2018</p>
		</div>
	</div>
</div>
<script src="__JS__/jquery.js"></script>
<script src="__JS__/agree.js"></script>
<script src="__JS__/layui/layui.all.js"></script>
<script type="text/javascript">

    $("#userLoginName").keyup(function () {
        checkInput()
    })
    $("#userPassword").keyup(function () {
        checkInput()
    })
    $("#reuserPassword").keyup(function () {
        checkInput()
    })
    $("#name").keyup(function () {
        checkInput()
    })
    function checkInput() {
        if($.trim($("#userLoginName").val()) != '' && $.trim($("#userPassword").val()) != '' && $.trim($("#reuserPassword").val()) != ''  && $.trim($("#name").val()) != ''){
            $("#register").removeAttr("disabled");
            $("#register").css('background','#41c981');
        }else{
            $("#register").css('background','#dddddb');
            $("#register").attr("disabled","disabled");
        }
    }


    $("#register").click(function () {
        var user = $.trim($("input[name='userLoginName']").val());
        var pass = $.trim($("input[name='userPassword']").val());
        var name = $.trim($("input[name='name']").val());
        if(user==''){layer.open({title: '提示',content: '请填写账号'});return}
        if(pass==''){layer.open({title: '提示',content: '请填写密码'});return}
        if(name==''){layer.open({title: '提示',content: '请填写用户名'});return}

        var repass = $.trim($("input[name='reuserPassword']").val());
        if(pass != repass){layer.open({title: '提示',content: '两次密码输入不一致'});return}

        var mobile = $.trim($("input[name='mobile']").val())
        if(mobile != ''){
            if(!(/^1[34578]\d{9}$/.test(mobile))){
                layer.open({title: '提示',content: '手机号格式不正确'})
                return false;
            }
        }

        var phone = $.trim($("input[name='phone']").val())
        if(phone != ''){
            var re = /^0\d{2,3}-?\d{7,8}$/;
            if(!re.test(phone)){
                layer.open({title: '提示',content: '电话号码格式不正确'})
                return false;
            }
        }

        var zipcode = $.trim($("input[name='zipcode']").val())
        if(zipcode != ''){
            var res= /^[1-9][0-9]{5}$/
            if(!res.test(zipcode)){
                layer.open({title: '提示',content: '邮政编码格式不正确'})
                return false;
            }
        }
        var data = {
            userLoginName:user,userPassword:pass,name:name,
            address:$.trim($("input[name='address']").val()),
            company:$.trim($("input[name='company']").val()),
            country:$.trim($("input[name='country']").val()),
            job:$.trim($("input[name='job']").val()),
            description:$.trim($("input[name='description']").val()),
            firstName:$.trim($("input[name='firstName']").val()),
            lastName:$.trim($("input[name='lastName']").val()),
            mobile:mobile,
            phone:phone,
            nickName:$.trim($("input[name='nickName']").val()),
            zipcode:zipcode,
            state:$.trim($("input[name='state']").val()),
            male:$("#male").val()
        }

        $.post("{:url('index/Sync/register')}",data,function (rs) {
//            console.log(rs)
//            return;
            if(rs.msg.code == 0){
                layer.open({
                    title: '提示信息',content: "注册成功",closeBtn: 0,icon:1,btn: ['去登录'],
                    yes: function(index, layero){
                        location.href="{:url('index/index/index')}"
                    }
                });
            }else{
                layer.open({
                    title: 'error'
                    ,icon:5
                    ,content: rs.msg.message
                });
            }
        })
    })


</script>
</body>
</html>